<script lang="ts">
import { defineComponent, ref, onUnmounted, onMounted, onBeforeUnmount } from 'vue'
import { useOrderStore } from '../stores/order'
import { useCarStore } from '../stores/shopcar'
import { useAddressStore } from '../stores/address'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { showToast } from 'vant'
import { tool } from '../function/tool'
export default defineComponent({
  components: {},

  setup() {
    let route = useRoute()

    let orderStore: any = useOrderStore()

    let carStore: any = useCarStore()

    let addressStore = useAddressStore()

    let orderData: any = ref([]) // 订单列表

    let pageFlag: any = ref(false) // 显示支付页面

    let giveupFlag: any = ref(false) // 显示放弃支付页面

    let payStyleFlag: any = ref(true) // 选择支付方式

    let orderDetailFlag: any = ref(false) // 显示订单详情

    let total: any = ref(1) // 选择支付方式

    let payId: any = ref(1) // 付款ID

    let orderDetail: any = ref([]) // 订单详情

    let addShopFlag = ref(false)

    let takeFlag = ref(false)

    // 定义一个定时器
    const timer = ref()

    // 实现切换效果
    // 激活下标 0 全部 1 进行中 2已完成
    let active: any = ref<number>(0)
    const toggleTab = () => {
      // return orderData.value;
      if (active.value == 2) {
        return orderStore.orderList.filter((item: any) => item.status == active.value)
      } else if (active.value == 3) {
        return orderStore.orderList.filter((item: any) => item.status == active.value)
      } else {
        return orderStore.orderList
      }
    }

    // tabs导航
    let tabsData: any = ref([{ title: '全部' }, { title: '待支付' }, { title: '待收货' }])

    // 获取订单数据
    const getOrderData = () => {
      let order_ids: any = ref([])

      order_ids.value = route.query.orderIds

      // 获取地址数据
      let addIndex = addressStore.addressList.findIndex((item: any) => {
        return item.id == route.query.addressId
      })

      let takeAddress = addressStore.addressList[addIndex]

      if (order_ids.value) {
        order_ids.value.forEach((item: any) => {
          carStore.carList = carStore.carList.filter((i: any) => {
            if (item == i.id) {
              orderData.value.unshift(i)
            } else {
              return item
            }
          })
        })

        orderData.value.forEach((item: any) => {
          // 判断是有重复订单
          let index = orderStore.orderList.findIndex((i: any) => i.id == item.id)
          // 没有
          if (index == -1) {
            let obj: any = {
              id: '',
              product: [],
              address: [],
              count: 0,
              total: 0
            }
            obj.date = tool.formatDate(Number(route.query.proDate), 'yyyy-MM-dd hh:mm:ss')
            obj.id = item.id
            obj.product.push(item)
            obj.address.push(takeAddress)
            obj.count = item.count
            obj.orderNum = Number(route.query.proDate) + obj.id
            obj.total += item.price * item.count
            obj.status = route.query.orderState
            obj.deal = 0
            // orderData.value.push(obj)
            orderStore.orderList = [obj, ...orderStore.orderList]
          }
          // else if (index >= 0) {
          //   // 有
          //   orderData.value[index].product.push(item)
          //   orderData.value[index].count += item.count
          //   orderData.value[index].total += item.price * item.count
          // }
        })
      }

      // orderStore.orderList = []
      // orderData.value = []
      // console.log(carStore.carList)

      console.log(orderData.value)
      console.log(orderStore.orderList)
    }

    // 付款
    const payGoods = (id: any) => {
      pageFlag.value = true
      payId.value = id
      let index = orderStore.orderList.findIndex((item: any) => {
        return item.id == id
      })
      total.value = orderStore.orderList[index].total
      console.log(total.value)
    }

    // 立即支付
    const immediaPay = () => {
      let index = orderStore.orderList.findIndex((item: any) => {
        return item.id == payId.value
      })
      orderStore.orderList[index].status = 3
      pageFlag.value = false

      addShopFlag.value = true

      timer.value = setTimeout(() => {
        addShopFlag.value = false
      }, 1000)
    }

    // 确认放弃
    const affirm = () => {
      giveupFlag.value = false
      pageFlag.value = false
    }

    // 确认付款
    const takeGoods = (id: any) => {
      let index = orderStore.orderList.findIndex((item: any) => {
        return item.id == id
      })
      orderStore.orderList[index].deal = 1
      orderStore.orderList[index].status = 1

      takeFlag.value = true

      timer.value = setTimeout(() => {
        takeFlag.value = false
      }, 1000)
    }

    // 取消订单
    const cancel = (id: any) => {
      let index = orderStore.orderList.findIndex((item: any) => {
        return item.id == id
      })

      orderStore.orderList[index].deal = 2
      orderStore.orderList[index].status = 1
      orderDetailFlag.value = false
    }

    // 订单详情
    const goOrderDet = (id: any) => {
      orderDetailFlag.value = true
      let index = orderStore.orderList.findIndex((item: any) => {
        return item.id == id
      })
      orderDetail.value = orderStore.orderList[index]

      console.log(orderDetail.value)
    }

    onMounted(() => {
      getOrderData()
    })

    return {
      tabsData,
      active,
      toggleTab,
      pageFlag,
      payStyleFlag,
      giveupFlag,
      affirm, // 确认放弃
      immediaPay, // 立即支付
      payGoods, // 付款
      total, // 付款价格
      takeGoods, // 确认收货
      goOrderDet, // 前往订单详情
      orderDetailFlag,
      orderDetail, // 订单详情
      cancel, // 取消订单
      addShopFlag,
      takeFlag
    }
  }
})
</script>

<template>
  <div class="back">
    <!-- 顶部订单列表？ -->
    <div class="new">
      <div class="new-l">
        <span class="iconfont icon-zuojian" @click="$router.go(-2)"></span>
      </div>

      <div class="font">订单列表</div>
      <div class="leftl">
        <div class="tle"><span class="iconfont icon-sangedian"></span></div>
      </div>
    </div>
    <!-- v-for="item in toggleTab()" :key="item.id" -->
    <van-tabs v-model:active="active" line-height="2" animated swipeable>
      <van-tab :title="item.title" :name="index + 1" v-for="(item, index) in tabsData" :key="index">
        <div class="lits" v-for="item in toggleTab()" :key="item.id">
          <div class="mai" v-for="value in item.product" :key="value.id">
            <div class="goods">
              <div class="goods-no" @click="goOrderDet(item.id)">
                <img :src="value.cover_url || value.def_img" alt="" />
              </div>
              <div class="goods-cont" @click="goOrderDet(item.id)">
                <div class="title">
                  <p>{{ value.name }}</p>
                  <span class="bank"></span>
                  <span>¥{{ (value.price / 100).toFixed(2) }}</span>
                </div>
                <div class="subtitle">
                  <p>{{ value.style }}</p>

                  <div>x{{ value.count }}</div>
                </div>
              </div>
            </div>

            <div class="items">
              <span class="ems">共{{ value.count }}件</span>
              <span class="it">需付款</span>
              <span class="ms">¥</span>
              <span class="mss">{{ (item.total / 100).toFixed(2) }}</span>
            </div>

            <div class="but">
              <span v-if="item.deal == 1">交易完成</span>
              <span v-if="item.deal == 2">交易关闭</span>
              <button v-if="item.status == 2" @click="payGoods(item.id)">付款</button>
              <button v-if="item.status == 3" @click="takeGoods(item.id)">确认收货</button>
            </div>
          </div>
        </div>

        <van-empty
          image="https://webstatic.mihoyo.com/upload/static-resource/2021/07/02/a6945b3ad80b13e7f43f8cea003d63f9_7131855251702464767.png?x-oss-process=image/resize,m_lfit,w_352,h_320,limit_1/format,webp"
          image-size="90"
          description="暂无订单"
          v-show="!toggleTab().length"
        />
      </van-tab>
    </van-tabs>
  </div>
  <!-- 支付页面 -->
  <div class="payPage" v-if="pageFlag">
    <div class="bank"></div>
    <div class="pay-box">
      <div class="pay-mess">
        <div class="pay-title">米游铺商品</div>
        <!-- {{ (item.total / 100).toFixed(2) }} -->
        <div class="price"><i>￥</i>{{ (total / 100).toFixed(2) }}</div>
        <!-- 取消按钮 -->
        <div class="cancel iconfont icon-closel" @click="giveupFlag = true"></div>
      </div>
      <div class="pay-style">
        <div class="aliPay" @click="payStyleFlag = !payStyleFlag">
          <div class="pay-left">
            <i
              ><img
                src="https://sdk-webstatic.mihoyo.com/sdk-payment-upload/2023/01/11/39b073aecd836c23fcc946cb21f44cb8_8633839261714476275.png"
                alt=""
            /></i>
            <span>支付宝</span>
          </div>
          <div :class="['pay-right', 'iconfont', 'icon-tick', { con: payStyleFlag }]"></div>
        </div>
        <div class="weChat" @click="payStyleFlag = !payStyleFlag">
          <div class="pay-left">
            <i
              ><img
                src="https://sdk-webstatic.mihoyo.com/sdk-payment-upload/2023/01/11/872a682b635c801b568214479464092b_4558682075688947537.png"
                alt=""
            /></i>
            <span>微信</span>
          </div>
          <div :class="['pay-right', 'iconfont', 'icon-tick', { con: !payStyleFlag }]"></div>
        </div>
      </div>
      <div class="pay-btn" @click="immediaPay">立即支付</div>
    </div>
  </div>
  <!-- 放弃支付 -->
  <div class="giveupPay" v-if="giveupFlag">
    <div class="giveup-box">
      <div class="text">
        <h5>确认放弃本次支付?</h5>
        <p>您的订单还未完成支付，请尽快支付哦。</p>
      </div>
      <div class="btn">
        <div class="affirm-btn" @click="affirm">确认放弃</div>
        <div class="continue-btn" @click="giveupFlag = false">继续支付</div>
      </div>
    </div>
  </div>
  <!-- 订单详情 -->
  <div class="order-detail" v-if="orderDetailFlag">
    <!-- 标题 -->
    <div class="new">
      <div class="new-l">
        <span class="iconfont icon-zuojian" @click="orderDetailFlag = false"></span>
      </div>

      <div class="font">订单详情</div>
      <div class="leftl">
        <div class="tle"><span class="iconfont icon-sangedian"></span></div>
      </div>
    </div>
    <!-- 订单状态 -->
    <div class="order-state" v-if="orderDetail.deal == 1">交易完成</div>
    <div class="order-state" v-if="orderDetail.deal == 2">交易关闭</div>
    <div class="order-state" v-if="orderDetail.status == 2">待付款</div>
    <div class="order-state" v-if="orderDetail.status == 3">待收货</div>
    <!-- 收货地址 -->
    <div class="chosed_addredss">
      <div class="chosed_left">
        <div class="chosed_icon">
          <i class="iconfont icon-dingweixiao"></i>
        </div>
        <div class="chosed_con">
          <div class="cho_top">
            {{ orderDetail.address[0].name }} {{ orderDetail.address[0].tel }}
          </div>
          <div class="cho_bo">
            {{ orderDetail.address[0].province }}{{ orderDetail.address[0].city
            }}{{ orderDetail.address[0].county }}{{ orderDetail.address[0].addressDetail }}
          </div>
        </div>
      </div>
      <div class="chosed_right">修改</div>
    </div>
    <!-- 商品信息 -->
    <div class="goods-info">
      <!-- <img src="../assets/img/15.jpg" alt=""> -->
      <!-- 信息 -->
      <div class="goods_mess">
        <div class="img">
          <img :src="orderDetail.product[0].cover_url || orderDetail.product[0].def_img" alt="" />
        </div>
        <div class="good_con">
          <div class="title">
            <span class="one-txt-cut">{{ orderDetail.product[0].name }}</span>
            <span class="one_price">￥{{ (orderDetail.product[0].price / 100).toFixed(2) }}</span>
          </div>
          <div class="good_dec">
            <span class="txt-cut dec">{{ orderDetail.product[0].style }}</span>
            <span class="one_count">x{{ orderDetail.product[0].count }}</span>
          </div>
        </div>
      </div>
      <!-- 小计 -->
      <div class="subtotal">
        <div class="sub_item">
          <span>商品金额:</span>
          <span>￥{{ (orderDetail.total / 100).toFixed(2) }}</span>
        </div>
        <div class="sub_item">
          <span>运费:</span>
          <span>￥0.00</span>
        </div>
        <div class="sub_tol">
          <span>需付款</span>
          <span class="sub_pri">￥{{ (orderDetail.total / 100).toFixed(2) }}</span>
        </div>
      </div>
    </div>
    <!-- 订单信息 -->
    <div class="order-message">
      <h5 class="mess-title">订单信息</h5>
      <div class="mess-con">
        <div class="mess-item">
          <div class="mess-name">订单编号</div>
          <div class="mess-right">{{ orderDetail.orderNum }}</div>
        </div>
        <div class="mess-item">
          <div class="mess-name">创建时间</div>
          <div class="mess-right">{{ orderDetail.date }}</div>
        </div>
        <div class="mess-item">
          <div class="mess-name">订单备注</div>
          <div class="mess-right">无</div>
        </div>
      </div>
    </div>
    <!-- 付款与取消订单 -->
    <div class="pay-bar" v-if="orderDetail.status == 2">
      <div class="cancel-botton" @click="cancel(orderDetail.id)">取消订单</div>
      <div class="pay-botton" @click="payGoods(orderDetail.id)">付款</div>
    </div>
  </div>

  <div class="showCode" v-if="addShopFlag">支付成功~</div>
  <div class="showCode" v-if="takeFlag">收货成功~</div>
</template>

<style lang="scss" scoped>
// 支付页面
.payPage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 888;
  background-color: rgba(0, 0, 0, 0.5);
  .bank {
    height: 55%;
  }
  .pay-box {
    position: relative;
    width: 100%;
    height: 45%;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    background-color: #fff;
    .pay-mess {
      display: flex;
      position: relative;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 30px;
      font-size: 14px;
      .price {
        margin-top: 15px;
        color: #ff6d6d;
        font-size: 26px;
        i {
          font-size: 16px;
        }
      }
      // 取消按钮
      .cancel {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 16px;
      }
    }
    .pay-style {
      padding: 0 12px;
      .aliPay,
      .weChat {
        display: flex;
        padding: 20px 0;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        .pay-left {
          display: flex;
          align-items: center;
          font-size: 14px;
          i {
            display: inline-block;
            width: 26px;
            height: 26px;
            margin-right: 8px;
            // background-color: pink;
            img {
              width: 100%;
            }
          }
        }
        .pay-right {
          width: 18px;
          height: 18px;
          line-height: 18px;
          border-radius: 50%;
          font-size: 12px;
          text-align: center;
          color: #fff;
          border: 1px solid #d1d1d1;
          margin-right: 15px;
          &.con {
            border: 1px solid #ff6d6d;
            background-color: #ff6d6d;
          }
        }
      }
    }
    .pay-btn {
      width: 90%;
      height: 40px;
      margin: 12px auto;
      line-height: 40px;
      border-radius: 50px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      background-color: #ff6d6d;
    }
  }
}

// 放弃支付
.giveupPay {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  z-index: 888;
  background-color: rgba(0, 0, 0, 0.5);
  .giveup-box {
    width: 70%;
    height: 130px;
    border-radius: 15px;
    background-color: #fff;
    .text {
      text-align: center;
      h5 {
        color: #000;
        font-size: 16px;
        margin: 15px 0 8px 0;
      }
      p {
        font-size: 13px;
        color: #afaaad;
      }
    }
    .btn {
      display: flex;
      margin-top: 15px;
      padding: 0 12px;
      div {
        flex: 1;
        text-align: center;
        padding: 10px 20px;
        border-radius: 30px;
        background-color: pink;
      }
      .affirm-btn {
        color: #ff6d6d;
        background-color: #ffe9e9;
        margin-right: 10px;
      }
      .continue-btn {
        color: #fff;
        background-color: #ff6d6d;
      }
    }
  }
}

// 订单详情
.order-detail {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 777;
  background-color: #fff;
  .order-state {
    font-size: 18px;
    line-height: 60px;
    padding-left: 12px;
    border-bottom: 10px solid #f3f3f4;
    background-color: #fff;
  }
  // 选择后的地址
  .chosed_addredss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #eee;
    background-color: #fff;
    padding: 10px 20px 0px 12px;
    height: 65px;
    font-size: 16px;
    border-bottom: 10px solid #f3f3f4;
    .chosed_left {
      display: flex;
      .chosed_icon {
        padding-top: 2px;
        margin-right: 5px;
        i {
          font-size: 15px;
        }
      }
      .chosed_con {
        .cho_top {
          margin-bottom: 8px;
        }
        .cho_bo {
          color: #9696a1;
          font-size: 14px;
        }
      }
    }
    .chosed_right {
      padding: 6px 18px;
      text-align: center;
      border-radius: 20px;
      font-size: 14px;
      border: 1px solid #eee;
    }
  }

  // 商品信息
  .goods-info {
    // height: 118px;
    background-color: #ffffff;
    margin-top: 10px;
    padding: 12px;
    border-bottom: 10px solid #f3f3f4;
    // 信息
    .goods_mess {
      display: flex;
      .img {
        width: 80px;
        height: 80px;
        margin-right: 12px;
        border-radius: 6px;
        // background-color: pink;
        img {
          border-radius: 6px;
          width: 100%;
        }
      }
      .good_con {
        width: 60%;
        font-size: 14px;
        flex: 1;
        .title {
          display: flex;
          justify-content: space-between;
          .one_price {
            margin-left: 20px;
          }
        }
        .good_dec {
          display: flex;
          margin-top: 10px;
          justify-content: space-between;
          .dec {
            color: #9696a1;
          }
          .one_count {
            margin-left: 20px;
          }
        }
      }
    }
    // 小计
    .subtotal {
      .sub_item {
        display: flex;
        margin-top: 10px;
        font-size: 14px;
        justify-content: space-between;
      }
      .sub_tol {
        display: flex;
        margin-top: 12px;
        line-height: 20px;
        justify-content: flex-end;
        .sub_pri {
          font-weight: 700;
          font-size: 15px;
          font-family: 'Fira Sans Black Italic';
        }
      }
    }
  }

  // 订单信息
  .order-message {
    padding: 10px 12px;
    .mess-title {
      color: #000;
      font-size: 16px;
    }
    .mess-con {
      .mess-item {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        font-size: 14px;
        color: #9696a1;
      }
    }
  }
  // 付款与取消订单
  .pay-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 60px;
    margin-top: 20px;
    border-top: 2px solid #fbfbfb;
    div {
      width: 70px;
      padding: 10px 25px;
      border-radius: 30px;
      text-align: center;
      margin-top: 30px;
      margin-right: 15px;
      font-size: 14px;
      border: 1px solid #ff6d6d;
    }
    .cancel-botton {
      color: #ff6d6d;
    }
    .pay-botton {
      color: #fff;
      background-color: #ff6d6d;
    }
  }
}
.back {
  width: 100%;
  background-color: #f3f3f4;
}

// 轻提示
.showCode {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 10px;
  border-radius: 5px;
  transform: translate(-50%, -50%);
  background-color: #ccc;
  z-index: 99999;
}

//   顶部订单列表
.new {
  height: 44px;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #fbfbfb;
}
.new-l {
  width: 10%;
  line-height: 44px;
  margin-left: 10px;
}
.font {
  width: 70%;
  /* background-color: orange; */
  text-align: center;
  line-height: 45px;
  font-size: 15px;
}
.leftl {
  height: 32px;
  background-color: #ffffff;
  border: 1px solid #f6f6f6;
  width: 15%;
  margin-right: 10px;
  margin-left: 5px;
  margin-top: 6px;
  border-radius: 20px;
  margin-right: 5px;
}
.leftl .iconfont {
  padding-left: 2px;
}

.leftl .tle {
  height: 22px;
  width: 22px;
  margin: 0 auto;
  /* background-color: beige; */
  padding-top: 8px;
}

//购物车样式
.lits {
  height: 190px;
  background-color: #ffffff;
  margin-bottom: 10px;
  padding-bottom: 15px;
  padding-top: 15px;
}
.mai {
  margin: 0 20px;

  height: 226px;
  // background-color: orange;
}
.goods {
  height: 94px;
  // background-color: blue;
  display: flex;
}
.goods-no {
  width: 94px;
  height: 94px;
  // background-color: chocolate;
  border: 2px solid #f9fafb;
}
.goods-no img {
  width: 100%;
}
.goods-cont {
  height: 94px;
  padding-left: 10px;
}
.title {
  // font-weight: 500;
  display: flex;
  width: 229px;
  .bank {
    width: 20px;
  }
}
.title p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
}
.title span {
  line-height: 21px;
  font-size: 14px;
  margin-left: 15px;
}
.subtitle {
  // background-color: orange;
  display: flex;
  justify-content: space-between;
  line-height: 22px;
}

.subtitle p {
  color: #a396a1;
  font-size: 13px;
}
.items {
  height: 23px;
  // background-color: cornsilk;
  margin-top: 20px;
  text-align: right;
  line-height: 23px;
}
.items .ms {
  font-weight: 700;
  font-style: italic;
}
.items .mss {
  font-weight: 700;
  font-size: 16px;
  font-style: italic;
}
.items .it {
  font-size: 13px;
  padding-right: 5px;
}
.items .ems {
  margin-right: 10px;
}
.but {
  height: 35px;
  margin-top: 10px;
  text-align: right;
  span {
    color: #ff6d6d;
  }
}
.but button {
  width: 100px;
  height: 40px;
  border-radius: 32px;
  border: 1px solid #ffd0d0;
  background-color: #ffffff;
  color: #ff6d6d;
}

.payPage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 888;
  background-color: rgba(0, 0, 0, 0.5);
  .bank {
    height: 55%;
  }
  .pay-box {
    position: relative;
    width: 100%;
    height: 45%;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    background-color: #fff;
    .pay-mess {
      display: flex;
      position: relative;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 30px;
      font-size: 14px;
      .price {
        margin-top: 15px;
        color: #ff6d6d;
        font-size: 26px;
        i {
          font-size: 16px;
        }
      }
      // 取消按钮
      .cancel {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 16px;
      }
    }
    .pay-style {
      padding: 0 12px;
      .aliPay,
      .weChat {
        display: flex;
        padding: 20px 0;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        .pay-left {
          display: flex;
          align-items: center;
          font-size: 14px;
          i {
            display: inline-block;
            width: 26px;
            height: 26px;
            margin-right: 8px;
            // background-color: pink;
            img {
              width: 100%;
            }
          }
        }
        .pay-right {
          width: 18px;
          height: 18px;
          line-height: 18px;
          border-radius: 50%;
          font-size: 12px;
          text-align: center;
          color: #fff;
          border: 1px solid #d1d1d1;
          margin-right: 15px;
          &.con {
            border: 1px solid #ff6d6d;
            background-color: #ff6d6d;
          }
        }
      }
    }
    .pay-btn {
      width: 90%;
      height: 40px;
      margin: 12px auto;
      line-height: 40px;
      border-radius: 50px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      background-color: #ff6d6d;
    }
  }
}

// 放弃支付
.giveupPay {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  z-index: 888;
  background-color: rgba(0, 0, 0, 0.5);
  .giveup-box {
    width: 70%;
    height: 130px;
    border-radius: 15px;
    background-color: #fff;
    .text {
      text-align: center;
      h5 {
        color: #000;
        font-size: 16px;
        margin: 15px 0 8px 0;
      }
      p {
        font-size: 13px;
        color: #afaaad;
      }
    }
    .btn {
      display: flex;
      margin-top: 15px;
      padding: 0 12px;
      div {
        flex: 1;
        text-align: center;
        padding: 10px 20px;
        border-radius: 30px;
        background-color: pink;
      }
      .affirm-btn {
        color: #ff6d6d;
        background-color: #ffe9e9;
        margin-right: 10px;
      }
      .continue-btn {
        color: #fff;
        background-color: #ff6d6d;
      }
    }
  }
}
</style>
